<script>
import _ from 'lodash'
import moment from 'moment'
import InspectService from '@/request/reservation/inspect'
export default {
  name: 'IndexReservationInspect',
  data () {
    return {
      options: {},
      pagination: {
        sort: null,
        order: null,
        size: 10,
        total: 0,
        current: 1,
        layout: 'total, sizes, prev, pager, next, jumper',
        sizes: [10, 20, 30]
      },
      listLoading: false,
      list: [],
      visibleEditInspect: false,
      editInspect: {}
    }
  },
  created () {
    this.listInspect()
  },
  watch: {
    'options': {
      deep: true,
      handler (val) {
        this.listInspect()
      }
    }
  },
  methods: {
    handleSizeChange: function (val) {
      this.pagination.size = val
      this.listInspect()
    },
    handleCurrentChange: function (val) {
      this.pagination.current = val
      this.listInspect()
    },
    listInspect () {
      this.listLoading = true
      let udp = InspectService.find(this.options, this.pagination)
      udp.then(res => {
        let data = res.result || {}
        this.list = _.clone(data.content || [])
        this.pagination.total = data.totalElements || 0
      })
      udp.finally(() => {
        this.listLoading = false
      })
    },
    handleDeleteInspect (item) {
      let confirm = this.$confirm('确认删除患者[' + item.patName + ']的[' + item.pname + ']项目吗?', '提示', {type: 'warning'})
      confirm.then(() => {
        InspectService.delete({id: item.id}).then(() => {
          this.$message({
            type: 'success',
            message: '删除项目成功'
          })
          this.listInspect()
        }).catch(error => {
          this.$message.error(error || '删除项目失败')
        })
      })
      confirm.catch(() => {
        this.$message({
          type: 'info',
          message: '取消删除'
        })
      })
    },
    handleCancelEditInspect () {
      this.editInspect = {}
    },
    handleEditInspect (item) {
      this.editInspect = item ? _.cloneDeep(item) : {}
      this.visibleEditInspect = true
    },
    handleSaveInspectSuccess (inspect) {
      this.visibleEditInspect = false
      this.listInspect()
    },
    handleSaveInspectError (error) {
      this.$message.error(error || '保存信息失败')
    },
    handleReservationInspect (item) {
      if (!item) {
        return
      }
      if (!item.patSn) {
        return
      }
      this.$router.push({name: 'reservation_reservation', params: {pat: item.patSn}})
      // item.state = 2
      // InspectService.save(item).then(() => {
      //   this.listInspect()
      // }).catch(error => {
      //   this.$message.error(error || '保存信息失败')
      // })
    },
    handleCancleReservationInspect (item) {
      if (!item) {
        return
      }
      item.state = 1
      InspectService.save(item).then(() => {
        this.listInspect()
      }).catch(error => {
        this.$message.error(error || '保存信息失败')
      })
    },
    tableTimeFormatter (row, column, cellValue, index) {
      if (!cellValue) {
        return ''
      }
      return moment(cellValue).format('YYYY-MM-DD HH:mm:ss')
    }
  }
}
</script>

<template>
  <el-container>
    <el-header height="45px">
      <el-form :inline="true" class="demo-form-inline" size="small">
        <el-form-item>
          <el-button type="primary" @click="handleEditInspect()">登记</el-button>
        </el-form-item>
      </el-form>
    </el-header>
    <el-main>
      <el-table
        :data="list"
        stripe
        border
        style="width: 100%">
        <el-table-column prop="sn" label="申请编号"></el-table-column>
        <el-table-column prop="patSn" label="患者编号"></el-table-column>
        <el-table-column prop="medicalNumber" label="就诊号"></el-table-column>
        <el-table-column prop="patName" label="患者姓名"></el-table-column>
        <el-table-column prop="charged" label="收费状态"></el-table-column>
        <el-table-column prop="source" label="来源"></el-table-column>
        <el-table-column prop="dsn" label="设备编号"></el-table-column>
        <el-table-column prop="dname" label="设备名称"></el-table-column>
        <el-table-column prop="psn" label="项目编号"></el-table-column>
        <el-table-column prop="pname" label="项目名称"></el-table-column>
        <el-table-column prop="time" label="检查时间" :formatter="tableTimeFormatter"></el-table-column>
        <el-table-column prop="createTime" label="登记时间" :formatter="tableTimeFormatter"></el-table-column>
        <el-table-column prop="state" label="状态" width="80"></el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleEditInspect(scope.row)" v-if="scope.row.state === 1">编辑</el-button>
            <el-button type="text" size="small" @click="handleReservationInspect(scope.row)" v-if="scope.row.state === 1">预约</el-button>
            <el-button type="text" size="small" @click="handleCancleReservationInspect(scope.row)" v-if="scope.row.state > 1">取消预约</el-button>
            <el-button size="small" type="text" style="color: #FF4949;" @click="handleDeleteInspect(scope.row)" v-if="scope.row.state === 1 && scope.row.charged === 0">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <el-footer height="35px">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagination.current" :page-sizes="pagination.sizes" :page-size="pagination.size" :layout="pagination.layout" :total="pagination.total"></el-pagination>
    </el-footer>
    <!-- 编辑检查 -->
    <el-dialog title="登记检查" :visible.sync="visibleEditInspect" @close="handleCancelEditInspect">
      <reservation-inspect-edit :data="editInspect" @success="handleSaveInspectSuccess" @error="handleSaveInspectError" @cancle="visibleEditInspect = false"></reservation-inspect-edit>
    </el-dialog>
  </el-container>
</template>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
